<template>
  <el-row :gutter="20" style="display: flex;justify-content: center">
    <el-col :span="14"><div class="grid-content bg-purple"  />
      <el-tabs type="border-card">
        <el-tab-pane label="关注">
          <div style="width: 100%;height: 500px">
            <p style="position: absolute;margin-top: 1px;color: #8590a6;">星光日报*发表了文章</p><br>
            <div style="position: absolute;margin-top: 10px">
            <a style="font-size: 18px;font-weight: 600;">新冠可致大脑萎缩、记忆丧失？｜星光早报 20220314</a><br>
            <img src="../assets/4.jpg" style="width: 205px;height: 105px;border-radius: 5px;margin-right: 235px;margin-top: 10px">
            </div>
            <div style="max-height: 100px;margin-top: 50px;width: 50%;margin-left: 35%">
              <span style="line-height: 1.6;margin-bottom: 1px">《星光早报》每工作日早八点发布，让@编辑部小李为你播报新闻热点和有趣瞎扯。 热点解读 【全国疫情最新进展，各地目前情况如何？】 本周末，全国疫情出现了小规模的爆发，多地出现突发式新增，其中吉林、山东、 </span>
            </div>
            <div style="position: absolute;margin-top: 20px;width: 100%;height: 50px">
              <el-button type="primary" style="height: 20px;width:100px;position: relative;right: 254px;vertical-align: middle;display: inline-block">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 15px;width: 20px;vertical-align: middle;display: inline-block"><path fill="currentColor" d="M512 320 192 704h639.936z"></path></svg>
                <span style="margin-left: 5px;padding:0px 0px 0px 2px;vertical-align: middle;display: inline-block;    background-color: transparent;">赞同</span>
              </el-button>
              <el-button type="primary" style="height: 30px;width:20px;position: relative;right: 260px;vertical-align: middle;display: inline-block">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 15px;width: 20px;position: relative;right: 8px;"><path fill="currentColor" d="m192 384 320 384 320-384z"></path></svg>
              </el-button>
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 20px;width: 20px;position:relative;right: 230px;vertical-align: middle;display: inline-block"><path fill="currentColor" d="M736 504a56 56 0 1 1 0-112 56 56 0 0 1 0 112zm-224 0a56 56 0 1 1 0-112 56 56 0 0 1 0 112zm-224 0a56 56 0 1 1 0-112 56 56 0 0 1 0 112zM128 128v640h192v160l224-160h352V128H128z"></path></svg>
              <span style="position: relative;right: 225px;vertical-align: middle;display: inline-block;background-color: transparent;">评论</span>
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 20px;width: 20px;position:relative;right: 205px;vertical-align: middle;display: inline-block"><path fill="currentColor" d="m64 448 832-320-128 704-446.08-243.328L832 192 242.816 545.472 64 448zm256 512V657.024L512 768 320 960z"></path></svg>
              <span style="position: relative;right: 200px;vertical-align: middle;display: inline-block">分享</span>
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 20px;width: 20px;position:relative;right: 180px;vertical-align: middle;display: inline-block"><path fill="currentColor" d="M283.84 867.84 512 747.776l228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72z"></path></svg>
              <span style="position: relative;right: 175px;vertical-align: middle;display: inline-block">收藏</span>
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 20px;width: 20px;position:relative;right: 150px;vertical-align: middle;display: inline-block"><path fill="currentColor" d="M288 128h608L736 384l160 256H288v320h-96V64h96v64z"></path></svg>
              <span style="position: relative;right: 145px;vertical-align: middle;display: inline-block">举报</span>
              <el-divider border-style="double" />
            </div>
            <div>

            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="推荐">Config</el-tab-pane>
        <el-tab-pane label="热榜">Role</el-tab-pane>

      </el-tabs>


    </el-col>
    <el-col :span="6"><div class="grid-content bg-purple" />
    <div style="width: 296px;height: 330px;border: 1px solid #d3dce6;border-radius: 5px">
      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 20px;width: 20px;position:relative;vertical-align: middle;display: inline-block;right: 100px"><path fill="currentColor" d="M628.736 528.896A416 416 0 0 1 928 928H96a415.872 415.872 0 0 1 299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 1 1-416 0 208 208 0 0 1 416 0z"></path></svg>
      <span style="position: relative;vertical-align: middle;display: inline-block;right: 95px">创作中心</span>
    <div style="width: 296px;height: 50px;margin-top: 10px">
      <div style="border-radius: 100%;height: 50px;width: 50px;position:relative;vertical-align: middle;display: inline-block;right: 40px;background-color:rgb(225,237,255)">
      <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 30px;width: 30px;text-align: center;margin-top: 10px;color: rgb(0,102,255)"><path fill="currentColor" d="M160 826.88 273.536 736H800a64 64 0 0 0 64-64V256a64 64 0 0 0-64-64H224a64 64 0 0 0-64 64v570.88zM296 800 147.968 918.4A32 32 0 0 1 96 893.44V256a128 128 0 0 1 128-128h576a128 128 0 0 1 128 128v416a128 128 0 0 1-128 128H296z"></path><path fill="currentColor" d="M352 512h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32zm0-192h320q32 0 32 32t-32 32H352q-32 0-32-32t32-32z"></path></svg>
      </div>
      <div style="border-radius: 100%;height: 50px;width: 50px;position:relative;vertical-align: middle;display: inline-block;right: 20px;background-color:rgb(255,243,225)">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 30px;width: 30px;text-align: center;margin-top: 10px;color: rgb(255,150,7)"><path fill="currentColor" d="m768 576 192-64v320l-192-64v96a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V480a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32v96zM192 768v64h384v-64H192zm192-480a160 160 0 0 1 320 0 160 160 0 0 1-320 0zm64 0a96 96 0 1 0 192.064-.064A96 96 0 0 0 448 288zm-320 32a128 128 0 1 1 256.064.064A128 128 0 0 1 128 320zm64 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z"></path></svg>
      </div>
      <div style="border-radius: 100%;height: 50px;width: 50px;position:relative;vertical-align: middle;display: inline-block;right: 0px;background-color:rgb(255,243,225)">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 30px;width: 30px;text-align: center;margin-top: 10px;color: rgb(244,200,7)"><path d="m199.04 672.64 193.984 112 224-387.968-193.92-112-224 388.032zm-23.872 60.16 32.896 148.288 144.896-45.696L175.168 732.8zM455.04 229.248l193.92 112 56.704-98.112-193.984-112-56.64 98.112zM104.32 708.8l384-665.024 304.768 175.936L409.152 884.8h.064l-248.448 78.336L104.32 708.8zm384 254.272v-64h448v64h-448z" fill="currentColor"></path></svg>      </div>
      <div style="border-radius: 100%;height: 50px;width: 50px;position:relative;vertical-align: middle;display: inline-block;left: 20px;background-color:rgb(229,248,248)">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8="" style="height: 30px;width: 30px;text-align: center;margin-top: 10px;color: rgb(28,191,191)"><path fill="currentColor" d="M384 960v-64h192.064v64H384zm448-544a350.656 350.656 0 0 1-128.32 271.424C665.344 719.04 640 763.776 640 813.504V832H320v-14.336c0-48-19.392-95.36-57.216-124.992a351.552 351.552 0 0 1-128.448-344.256c25.344-136.448 133.888-248.128 269.76-276.48A352.384 352.384 0 0 1 832 416zm-544 32c0-132.288 75.904-224 192-224v-64c-154.432 0-256 122.752-256 288h64z"></path></svg>
      </div>
      <div style="width: 296px;height: 30px;margin-top: 10px">
        <span style="margin-right: 1.9em;font-size: 14px">回答问题</span>
        <span style="margin-right: 1.9em;font-size: 14px">发视频</span>
        <span style="margin-right: 1.9em;font-size: 14px">写文章</span>
        <span style="margin-right: 1.9em;font-size: 14px">写想法</span>
      </div>
      <div style="width: 296px;height: 100px;margin-top: 10px">
        <img src="../assets/img.png" style="width: 296px;">
      </div>
      <div style="width: 296px;height: 100px;margin-top: 10px">
        <input type="button" value="+ 开始创作吧" style="border-radius: 5px;border: 1px solid lightskyblue;height: 60px;width: 260px;margin-top: 20px;font-size: 18px;color: cornflowerblue;background-color: white">
      </div>
    </div>

    </div>


    </el-col>

  </el-row>
</template>

<script>
export default {
  name: "Shou.vue"
}
</script>

<style scoped>

</style>